<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>东北药用植物种质资源保存信息网</title>
    <link rel="shortcut icon " href="js/plant.png" >
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/vue.js"></script>
    <link href="js/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="js/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #show {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap
        }

        table {
            float: left;
            text-align: center;
        }
    </style>
</head>
<body>
<section id="show" style="margin-left: 10%;margin-top: 5%">
    <div>
        <table class="table table-bordered">
            <thead v-for="(name,index) in kkp(nameList,3)" :key="index">
            <th v-for="(item,i) in name" :key="i">
                <table>
                    <thead>
                    <th>{{item}}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
                    <th>{{plantList[item]}}</th>
                    </thead>
                </table>
            </th>

            </thead>
        </table>

    </div>

</section>
</body>
<script type="text/javascript">
    var result
    var resourceNumber;

    function oneValues() {
        var url = window.location.search;
        if (url.indexOf("?") != -1) {
            result = url.substr(url.indexOf("=") + 1, 2);
            resourceNumber = url.substr(url.lastIndexOf("=") + 1)
        }
    }

    const x = new Vue({
        el: '#show',
        data: {
            plantList: '',
            nameList: ''
        },
        methods: {
            queryBya() {
                oneValues()
            },
            queryByRn() {
                axios.get('http://8.130.8.204:8080/plant/import/queryById', {params: {resourceNumber: resourceNumber}}).then(res => {
                    this.plantList = res.data
                    this.nameList = Object.keys(this.plantList)
                })
            },

        },
        computed: {
            kkp() {
                return function (data, count) {

                    if (data != undefined) {
                        var data1 = data.slice(parseInt(result) + 1)
                        let index = 0;
                        let arrTemp = [];
                        for (let i = 0; i < data1.length; i++) {
                            index = parseInt(i / count);
                            if (arrTemp.length <= index) {
                                arrTemp.push([]);
                            }
                            arrTemp[index].push(data1[i])
                        }
                        return arrTemp
                    }
                }
            }
        },


        created() {
            this.queryBya()
            this.queryByRn()
        }
    })
</script>
</html>